<template>
  <div>
    <!-- // 知识点1：axios默认会把data（请求体）参数对象转成JSON字符串发给后台 //
    自己携带的请求头Content-Type： application/json请求参数 // -->

    <!-- 知识点2：封装函数，什么时候需要参数，什么时候需要返回return //
    1.函数内，某个值自己内部不确定/每次函数调用都不一样，必须留好形参让外传入 //
    2.函数调用处（外面）需要函数内部处理后的’结果'，必须return出去 -->

    <!-- 跨域报错的提示：Access to XMLHttpRequest at 'http://ihrm.itheima.net/api/sys/login' from origin 'http://localhost:9528' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. -->
    <!-- 知识点3：什么是跨域
    1.跨域是"浏览器'对'ajax'做出的同源策略限制
    2.同源指的是，网页在浏览器打开时，地址栏里的地址中协议，域名，端口和内嵌的ajax请求的url地址中协议，域名，端口有一个对不上就跨域了
    注意:服务器和服务器之间的请求是没有跨域限制的 -->

    <!-- 知识点4：解决跨域
    方式1:jsonp
    注意：sonp和json没有关系，JSON是一种j序列化数据的基数，JSONP是解决跨域的技术
    使用：script标签的src属性，来发送请求而且不受跨域限制，请求后让后台返回一个函数调用字符串+数据，在前端进入到script标签之间，当做js代码执行，把数据带回来
    特点：需要前端传递一个方法名，后端返回函数调用格式的字符串
    要求：前端和后端同时支持

    方式2：cros
    概念：跨域资源共享，现在浏览器前端默认支持的，但是还需要后端开启才行
    使用：cros是让后端进行设置
    特点：可以在响应头里看看有没有一个叫'Access-Control-Allow-Origin'字段（是后台设置的，作用：允许那些源进行跨域访问）
    要求：前端什么都不用做，正常使用axios发送ajax请求，只需要后端开启（前端无需感知）


  方法3：代理服务器
  针对:后端不开跨域支持，我们前端自己用代理服务器也能获取数据
  原理:前端代理服务器，请求后端接口服务器，因为服务器之间没有跨域限制
  好在：vue脚手架有一个webpack开发服务器支持，给这个服务器进行配置，让他支持代理转发
  1.让axios请求，不要直接请求外联地址（http开头的),而是要请求/开头，代表当前所在服务器(http://localhost:9528)
  2.配置代理转发的规则，vue.config.js中devServer的proxy选项内配置（让开发让服务器支持代理转发）
  前提:后端真的有接口地址可以使用，才能用ajax请求（前后端分离项目）
   特殊：后端渲染的项目（SSR/nuxt.js计数--新学vue语法），数据在后端渲染完毕返回给前端网页不用使用axios请求
     -->

    <!--  知识点5：请求的路径 问题
    axios/script标签src/img标签src/link和href，都会发起一次请求
   如果是./开头的地址，找当前文件夹
   如果是http开头的地址，找到外链外部服务器（链接网路）
   如果是/开头的地址，忽略文件夹，直接找到当前运行时，所在服务器 -->

    <!-- // 知识点6：axios 内部的处理机制
    方式1：http状态码处理
     1.http状态码为2xx, 3xx，就会给Promise对象位置，返回成功的结果（resolve())
     2.http状态码为4xx, 5xx，就会给Promise对象位置，返回错误的结果（reject())
     如果想做一些操作，可以在axios的响应拦截器，自己来回处理返回结果
     方式2：后台返回的对象里code字段/success字段（’逻辑字段'判断）只是针对于token过期
      -->

    <!--  知识点7：await只能拿到成功的结果，如果Promise对象内用reject()返回，这里就中断不往下执行 -->

    <!--  知识点8：当Promise对象这里，没有自己捕获到错误（tru+catch，或者.catch（））然后处理的话，浏览器就会把抛出的这个错误打印到控制台里，’终止代码继续往下 -->

    <!-- 知识点9：捕获Promise的错误2种方式 
    1.通用的：try+catch只针对Promise的：await Promise对象.catch(err=>err) 
    2.只针对Promise的：await LoginAPI(this.loginForm).catch(err =>console.error(err)) 
     res既能拿到成功的数据，也能拿到catch()里函数返回值 
    console.error()函数调用在原地无返回值undefined，=》默认返回来undefined给res -->

    <!-- // 知识点10：axios内部会把后台返回的数据直接放到data字段下面（第一个data是axios处理的） -->

    <!-- 知识点11：conlose.log(普通打印)；error(红色打印);dir（打印对象详细） -->

    <!-- 知识点12：js文件中能否使用this.$store? //
    不能，因为这个this关键字不是Vue组件对象，无法查找原型链上$store //
    但是this.$store为了拿到的是store/index.js导出store对象 //
    解决：我们在undefined导入过来使用，是同一个store对象 -->

    <!-- 知识点13：为何本地存token，不直接使用本地token（在请求拦截器里）
    为何多次一举，还要在vuex同步一份 本地也可以去拿，也可以想vuex一样共享
    答案：vuex是存在内存里的，取值更快，浏览器本地储存室是存在磁盘里（持久化）操作磁盘比较慢 -->

    <!-- 知识点14：回调地狱
    异步请求，ajax/axios都会有回调函数onlind/then（）里函数体，在回调函数里拿到结果
    拿到结果以后，在这个函数体里，再次发送请求，又会有一个函数体嵌入在这里，继续嵌套请求+回调函数。。。嵌套下去（套娃）
    形成了回调地狱 -->

    <!-- 知识点15：.native使用
    前提：组件身上绑定'原生名字'事件，但是组件身上虽然名字是原生的，但是都需要组件内$emit触发才支持
    如果组件内不支持这个原生名字的时间
    解决：我们就可以给组件的@原生名字事件.native---告诉vue给他绑定原生的事件，而不是自定义事件
    例如：<el-xxx@click.native>xxx</el-xxx> -->

    <!-- // 知识点16：刷新网页会让路由守卫再走一次 -->

    <!-- 知识点17：vue组件样式相关
    1.运行时，选中标签，看右侧的style里样式被划线划掉了，优先级不够（权限）
    2./deep/选中组件内的选择器，如果看右侧的style样式类名已经上去了证明已经选中了跟/deep/没啥关系，如果发现类名写了，但是没上去
    运行时选择器没有选到组件内类名（/deep)
    /deep/作用把socpe假的属性选择器加到类名的前面，选中组件内无属性的类名
    3.用错了，svg用dill属性填充图标颜色，而不能用style影响颜色  -->

    <!-- 知识点18：js局部变量只能在js里使用 -->

    <!-- 知识点19:封装
    好处：方便以后替换，方便复用，固定的值放在统一位置管理
    最好：逻辑页面不出现固定的文字/数字/封装到一个统一的js文件使用
    有自然语言的意思的值（可能会频繁变化的） -->

    <!-- 知识点20写html+css套路 -->
    <!-- 从大到小，从上到下，每个小块里，从左到右，分div，然后填充标签，调整css -->

    <!-- 知识点21 v-model是VUE的指令（语法糖）
    <标签 v-model=”vue变量“></标签>
    作用：实现数据双向绑定
    双向:当前标签的value属性和vue变量双向绑定到一起
    v-model运行时，会给当前标签添加：value=“vue变量”，还会给当前标签绑定@input事件的值赋予给vue变量
    本质:<标签：value=“vue变量” @input=“（值）=>vue变量=>值”>
    问题：除了在表单标签上用v-model，自定义的组件身上是否可以使用v-model
    可以的 ，但是需要组件内定义props：必须交value，内部监测输入框改变，必须触发$emit('input'，值）-->

    <!-- 知识点22 如何找到标签预支对应的代码
    1.用类名/关键文字，回来放大镜搜索（如果有多个地方，一定要关联起来读读）
    2.如果第一种翻遍了没有，那可能是后台返回的动态数据看network相关接口
    3.既不是前端写的固定，也不是后台返回的文字，组件库内置的（包内置）
    4.他有可能是图片 -->

    <!--知识点23 刷新token的思路
    1.现在用，axios响应拦截器里，判断401，强制清除本地vuex的token值，强制回到登录页面（用户有感知/让用户重新登录，拿到新的token值）
    2.无感知：axios响应拦截器里，判断401，强势清除过期的vuex和本地token值
    前提：后端提供了刷新你token的接口，登录时，会给你返回2个token（一个是普通用的token，另一个叫refresh_token值）调用刷新token的接口
    吧refresh_token传递给后台，换回一个新的token，而不必强制跳转登录页面，让用户重新登录 -->

    <!-- 知识点24 vue组件的运用 （旭哥经验）
    其实组件都是.vue组件，没有区别 组件分为2类
    1.页面组件：都是和路由配合使用/作为页面的某一部分（业务逻辑/数据处理/网络请求调用）
    2.复用组件:当前页面多次使用/别的页面也要使用它（只负责展示数据，所有的逻辑和网络请求都传回到页面组件里编写）如果有父子关系还要遵守单向数据流 -->

    <!-- 知识点25：属性值默认是字符串（别看是false但是也是字符串会判定为真）
     字符串里只有''为假 -->

    <!-- 知识点26：加冒号和不加冒号的区别
     加冒号后面的值就是表达式（常量和变量）
     不加冒号后面的值就是字符串 -->

    <!-- 知识点27 为何props的变量vue不建议我们修改 
    子组件自己修改此变量的值，不会影响到父级 
    父级刷新此变量的值会对视，变成父级传入的值 
   所以props一般是只读的（引用类型除外） 
    遵守：单向数据流，子里要改变父传来的props值，要用$emit计数 
    传递给父亲，让父亲改变数据，在重新单向流入到子组件内 -->

    <!-- 知识点28.sync
    父传子
    1.子组件props：{num:Number}
    2.父组件<子组件 num="myNum"></子组件>
    以前子传父
    1.子组件内：this.$emit('自定义事件名'，100)
    2.父组件内：<子组件 @自定义事件名=“事件处理函数'></子组件>
    事件处理函数中，给myNum=100,myNum会流回到子组件props的num变量上用来.sync修改上面的代码
    父传子
    1.子组件props：{num:Number}
    2.父组件<子组件 num="myNum"></子组件>
    以前子传父
    1.子组件内：this.$emit('update:num',100)格式update：props变量名
    2.父组件内：<子组件 num.sync=“myNum”></子组件>
    .sync相当于是一个语法糖 @update：num=’值‘=>myNum=’值‘
    .sync作用：优化子传父的过程（父组件内不必在实现赋值过程，但是如果父组件里需要负载的操作，还是用原来的写法 -->

    <!--  知识点29 改变props方式2中 
    1.转存到data变量上（改变的时候只是改变组件内data，父级数据没有收到影响）偶尔使用
    2.子传父计数，父级把这个变量的值改变后在流回到props变量上，常用 -->

    <!-- 知识点30：Vue的生命周期
 概念: Vue实例(new Vue或者每个组件对象)从创建到销毁的过程
 钩子函数: (生命周期函数), 组件对象在每个阶段会自动执行一些固定名字的函数(通知我们到达了那个阶段)
 记住: 每个钩子函数的特点即可
 阶段: 4大阶段
 方法: 8个方法
 (1): 初始化(创建)阶段 beforeCreate created
 (2): 挂载阶段 beforeMount mounted
 (3): 更新阶段 beforeUpdate updated
 (4): 销毁阶段 beforeDestroy destroyed

 特点:
 beforeCreate (this实例上还没有添加data/methods属性)
 created (this实例上能访问到data和methods里定义的属性和方法) - 早发早享受数据而且可以拿到data里的变量赋值
 beforeMount (虚拟DOM还没有变成真实的DOM, 不要在这里获取真实DOM, 拿不到的)
 mounted (想获取真实DOM标签, 一般在这里获取)
 当你的data里/计算属性/this实例里的变量发生变化的时候, 执行更新的钩子函数
 beforeUpdate (数据变化了, 但是真实DOM还没有更新)
 updated (数据变化了, 真实DOM更新完毕, 会触发此函数)
 当组件用v-if/调用组件$destroy()方法, 当前组件会被从内存里销毁掉
 前者DOM也一起没了, 后者标签还在组件对象没了
 beforeDestroy
 destroyed - 应用: 去掉当前组件占用的全局资源(window.adDEventListeners就要在这个阶段销毁事件监听, 计时器/定时器)

 补充: 3个方法
 前提: 你使用keep-alive缓存的组件, 会新增2个钩子函数
 activated - 触发激活 (切换回来) -> 类似created
 deActivated - 失去激活 (被切走了) -> 类似destroyed
 注意: 组件被缓存, created只走第一次, 以后不在执行(所以用activated来代替created, 检测组件回来了), destroyed不会触发组件缓存不销毁, 用deActivated来替代, 监视此组件被切走了
 errorCapture:偶尔用, 捕获子组件里的报错 -->

    <!-- 知识点31：作用域
 作用域插槽口诀：
 1.子组件里slot身上绑定自定义属性和值
 2.父组件里用template/其他的标签，配合v-slot="变量名",收集对应slot身上的属性名和值形成数据对象
 插槽基本使用口诀：
 1.子组件用slot占位
 2.父组件里给组件标签夹着的地方传入具体标签替换slot的位置
 如果想自定义表格里每个单元格的标签就要用的是插槽
 在使用插槽时,发现插槽里(父组件使用)标签需要用的组件内的数据时,要用作用域插槽
 v-slot:具名插槽="作用域插槽变量"
 scope变量的值:{row:obj对象}
 结论：作用域插槽变量对象里的值,属性名来自于组件内slot身上绑定的属性名(组件库人家内部用的什么名字你就用什么名字)

 父传子口诀
 1.子组件里设置props变量名和接收使用
 2.父组件里给此组件标签传入值 -->

    <!-- 知识点32:请求参数如何看
后台要求？查询字符串（英文叫query），axios就在params里发的对象参数名和值就会被axios处理后拼接在？后面请求后台接口
后台要求请求体（英文叫body），axios就在data里发，装载请求体里给后台
后台要求请求头（英文叫Header），axios里headers选项里发，装载在请求头上 -->

    <!-- 知识点33：分页组件
只负责分页标签玄幻渲染你，和点击切换，获取和设置分页的数组而已
关联的数据切换-需要自己写，人家组件不会帮我换数据 -->

    <!-- 知识点34：测试
两端极端测试通过，就没有问题
比如带页码的数据
删除测试-做分页
无数据，第一页都删除测试代码和接口是否正常
多页数据，删除当前页最后一条 -->

    <!-- 知识点35 为何全局一遍都在main.js里写？能不能在别的地方写？
可以在任意地方写Vue.component（）,但是我必须要让这行代码，在使用组件之前先执行
整个项目的入口(先执行的)main.js
main.js--项目入口(webpack打包执行入口)
Vue原型上/用vue的方法进行的全局注册创建，注册后，任意地方都能使用全局常见的东西（vue体系） -->

    <!-- // 知识点37：Vue.use()里面要放入一个函数的话，直接执行此函数传入的Vue类
   // 知识点38：Vue.use()里面要放入一个对象，必须有install属性，Vue.use会执行install对应的方法传入Vue类 -->

    <!-- // 知识点39：对象.具体的key名（key必须已经在对应里了)
      // 对象[变量] -->

    <!-- 知识点40：字符串数字相比
      按位，从左到右，每一对对应比较ascii码，知道决出大小位置后面不比较了
      '1001'>'111'假（但是如果是数字的话应该为真）
      计算原理：计算机里只有0和1数字，低电平和高电平之分
      把字符串转成ASCII码数字对比 -->

    <!-- 知识点41：404的问题？
      '链接'指向的'资源'不存在
      链接：html文件地址/css文件地址/图片文件地址/路由地址/ajax请求接口地址/前端文件路径
      路由路径执行的地址根本不存在，就404
      图片那一串地址指向位置资源不存在，就404

      再见到404，要具体情况分析
      例如：项目里头像404问题
      分析：：地址http:/wss.nihao.cnclound.aaa.com/ok/5.png(资源不存在404)
      情况1：地址拼错了
      情况2：资源不存在
      分析：地址http://www.baidu.com /net/%1220/api/login(地址错误404) -->

    <!-- 知识点42前端如何做预览效果
   前端网页选择了一个图片要上传，但是上传之前想要在前端先显示一下我们的图片
   URL.createObjectURL(文件对象)--blob二进制地址(前端浏览器内的一个图片地址)
   一般给img的src设置做“’纯前端图片预览的效果” -->

    <!--  知识点43 第三方SDK
   一些有名的/别的公司出的服务
   例如：微信支付/百度地图/QQ登录
   可以在自己的项目中集成他们的服务功能（有免费/花钱的）
   步骤1：去对应官网创建账号申请key（密钥/if）表明身份（类似token）
   步骤2：看对应的文档，，再在他们的js插件/sdk-npm 下包（他们写好的代码和方式），在我们自己的项目中调用即可 -->

    <!-- 知识点44：toFixed（小数位数）返回字符串数字
   parseInt（）取前面的数字转整数
   parseeFloat（）字符串数字-小数 -->

    <!-- 知识点45：this的指向问题
前提：我们写的都是templat里标签和export default{}里js，都是模板/配置项代码-并非运行时直接使用
运行：template=虚拟DOM（保存标签节点关键信息的js对象）=真实DOM结构=网页指定标签位置里
运行：js=export default{},里面都是配置项代码，methods里/data里/computed里/...
导入vue源码中，给当前Vue文件对应这个组件对象（this值),添加data函数执行后，里面的属性和初始值
用this访问的是当前组件内部相关的属性和值 -->

    <!--知识点46： 只有在export defau{}这个配置对行李定义的属性和方法，才需要this.调用
// script标签impo const var 声明的变量/函数形参变量名，都是直接使用，不要this
// 标签上省略this.来访问vue体系内的变量 -->

    <!-- // 知识点47：$ref是vue给this身上添加的内置属性（一般内置的属性都以$开头-内置api接口属性/方法，为了和我定义的属性去人开
// 语法:this.$refs.ref名字-获取“原生标签”/目标“组件对象”（此vue文件里this的值）
// 例如：
// <p ref='myp'>我是p标签</p>
// <per-dialog ref="perDialog"></per-dialog>
// this.$refs.myp==原地的值，原生p标签对象===key+value值
// this.$refs.perDialog==原地的值 perDialog组件对象（vue文件内this值）==key+value值 -->


知识点48，从另一个文件夹模块，调到另一个文件夹模块，用vuex,跨组件通信

    项目遇到的问题1 // 常见的问题：新增和编辑公用一个表单 //
    问题：新编辑回显，然后在点击创建，还会有原来的数据 //
    原因：此表单隐藏不是DOM上移除后重新创建，而是用css的方式隐藏标签，标签里的数据还在标签身上
    // 好处：创建DOM和移除DOM，比css隐藏方式，要耗费更多的资源（性能） //
    解决：弹窗关闭的时候，清空表单/在将要出现的时候（点击新增子部门/编辑部门的位置）清空表单
    
    项目遇到的问题2====轻易不要直接改变el-form绑定的表单数据对象，会导致reset重置失效(简历可以写这个)

项目问题3：动态路由：坑点（经验）
  // 1..路由守卫中，先匹配现有路由规则数组（new Router中routes数组里规则）如果匹配了就放行跳转，如果没匹配就404
  // 2.才添加的动态路由规则，手动切换还能回去，点击左侧导航也好使
  // 3.路由守卫肯定比我点击手速快，（代码执行速度比我操作的块）当我手动切换/点击导航的时候，动态路由已经挂在完毕
  // 路由守卫-判断路由规则-放行页面-添加动态路由规则到数组后续-用户操作
  </div>
</template>
  
